<!--
@name:dialongThemeConfig
@author:Zhenglei
@date:17:17
@description:dialongThemeConfig
@update:2022/8/2517:17
-->
<template>
  <el-dialog title="填写或设备检测"
             :visible.sync="visible"
             :before-close="modalClose"
             :append-to-body="true"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="50%">
    <el-form :model="subData"
             label-position="right"
             label-width="150px"
             ref="formModelRef"
             :rules='formModelRules'>
      <el-form-item label="类型：" class="is-required">
        <el-select v-model="subData.type"
                   class="w-300"
                   :disabled="isEdit"
                   @change="handleChangeType"
                   placeholder="请选择类型">
          <el-option v-for="item in typeDataSource"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="手动输入：" prop="indexId" v-if="subData.type===1">
        <el-select v-model="subData.indexId"
                   class="w-300"
                   placeholder="请选择">
          <el-option v-for="item in manualDataSource"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="量表：" prop="scaleId" v-if="subData.type===2">
        <el-select v-model="subData.scaleId"
                   class="w-300"
                   placeholder="请选择量表">
          <el-option v-for="item in scaleDataSource"
                     :key="item.id"
                     :label="item.scaleName"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <div v-if="subData.type===3">
        <el-form-item label="检测项：" prop="deviceId">
          <el-select v-model="subData.deviceId"
                     class="w-300"
                     filterable
                     @change="handleDetect"
                     placeholder="请选择检测项">
            <el-option v-for="item in detectDataSource"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="检测项指标：" prop="referenceId">
          <el-select v-model="subData.referenceId"
                     class="w-300"
                     placeholder="请选择检测项指标">
            <el-option v-for="item in targetDataSource"
                       :key="item.referenceId"
                       :label="item.referenceName"
                       :value="item.referenceId">
            </el-option>
          </el-select>

        </el-form-item>

      </div>
      <el-form-item label="条件判断：" prop="conditionId" v-if="subData.type===4">
        <el-select v-model="subData.conditionId"
                   class="w-300"
                   placeholder="请选择条件">
          <el-option v-for="item in conditionDataSource"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否必填：">
        <el-radio-group v-model="subData.isMust">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序：" prop="sort">
        <el-input class="w-300" type="number" v-model="subData.sort" placeholder="请输入排序" clearable/>
      </el-form-item>
    </el-form>
    <p align="center">
      <el-button @click="modalClose"
                 type="info">取 消
      </el-button>
      <el-button type="primary"
                 v-prevent-re-click
                 @click="handleSave()">保 存
      </el-button>
    </p>

  </el-dialog>
</template>

<script>
export default {
  name: "dialongThemeConfig",
  props: {
    configDataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      subData: {
        type: 1,
        indexId: '',
        scaleId: '',
        deviceId: '',
        deviceName: '',
        content: '',
        referenceId: '',
        conditionId: '',
        sort: '',
        isMust: 0
      },
      isEdit: false,
      typeDataSource: [
        {
          id: 1,
          name: '手动输入'
        },
        {
          id: 2,
          name: '量表'
        },
        {
          id: 3,
          name: '检测项'
        },
        {
          id: 4,
          name: '条件判断项'
        },
      ],
      manualDataSource: [],
      scaleDataSource: [],
      detectDataSource: [],
      targetDataSource: [],
      conditionDataSource: [],
      formModelRules: {
        indexId: [{required: true, message: '请选择内容', trigger: 'change'},],
        scaleId: [{required: true, message: '请选择量表', trigger: 'change'},],
        deviceId: [{required: true, message: '请选择检测项', trigger: 'change'},],
        referenceId: [{required: true, message: '请选择检测项指标', trigger: 'change'},],
        conditionId: [{required: true, message: '请选择条件判断', trigger: 'change'},],
        sort: [{required: true, message: '请输入排序', trigger: 'blur'},],
      }
    }
  },
  created() {
    if (this.configDataObj.type) {
      this.isEdit = true
      this.subData = Object.assign(this.subData, this.configDataObj)
      this.interfaceJudgment(this.configDataObj.type)
      if (this.configDataObj.deviceId) {
        this.getDeviceReferenceByDeviceId(this.configDataObj.deviceId)
      }
    } else {
      this.isEdit = false
      this.getHealthMapIndexItemList()
    }
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false);
    },
    handleChangeType(val) {
      this.subData.indexId = ''
      this.subData.scaleId = ''
      this.subData.referenceId = ''
      this.subData.deviceId = ''
      this.subData.conditionId = ''
      this.interfaceJudgment(val)
    },
    handleDetect(val) {
      this.subData.referenceId = ''
      this.getDeviceReferenceByDeviceId(val)
    },
    interfaceJudgment(type) {
      switch (type) {
        case 1:
          this.getHealthMapIndexItemList()
          break
        case 2:
          this.getScaleAll()
          break
        case 3:
          this.getAllDeviceList()
          break
        case 4:
          this.getConditionList()
          break
      }
    },
    handleSave() {
      this.$refs.formModelRef.validate(valid => {
        if (valid) {
          if (this.subData.type === 1) {
            this.subData.content = this.manualDataSource.find(item => item.id === this.subData.indexId).name
          } else if (this.subData.type === 2) {
            this.subData.content = this.scaleDataSource.find(item => item.id === this.subData.scaleId).scaleName
          } else if (this.subData.type === 3) {
            this.subData.deviceName = this.detectDataSource.find(item => item.id === this.subData.deviceId).name
            this.subData.content = this.targetDataSource.find(item => item.referenceId === this.subData.referenceId).referenceName
          } else if (this.subData.type === 4) {
            this.subData.content = this.conditionDataSource.find(item => item.id === this.subData.conditionId).name
          }
          this.$emit('handleConfigResultData', this.subData)
          this.modalClose()
        }
      })
    },
    //查询手动输入
    getHealthMapIndexItemList() {
      this.post(this.api.healthMap.getHealthMapIndexItemList).then((res) => {
        if (res.data.code === '200') {
          this.manualDataSource = res.data.object
        }
      })
    },
    //查询量表
    getScaleAll() {
      this.post(this.api.healthMap.getScaleAll).then((res) => {
        if (res.data.code === '200') {
          this.scaleDataSource = res.data.object
        }
      })
    },
    //查询检测项
    getAllDeviceList() {
      this.post(this.api.healthMap.getAllDeviceList).then((res) => {
        if (res.data.code === '200') {
          this.detectDataSource = res.data.object
        }
      })
    },
    //检测项查询指标
    getDeviceReferenceByDeviceId(deviceId) {
      this.post(this.api.healthMap.getDeviceReferenceByDeviceId, {
        deviceId: deviceId
      }).then((res) => {
        if (res.data.code === '200') {
          this.targetDataSource = res.data.object.referenceDtoList
        }
      })
    },

    //查询条件
    getConditionList() {
      this.post(this.api.healthMap.getConditionList).then((res) => {
        if (res.data.code === '200') {
          this.conditionDataSource = res.data.object
        }
      })
    },
  },
}
</script>

<style scoped>

</style>
